<template>
   <div class="user-management">
      <div class="header">
         <div class="img">
            <img :src="headerImg.Headimagelink"/>
            <div class="edit-header" @click="_editHeader">
               编辑头像
            </div>
         </div>
         <div class="modifyUser" v-if="isHeaderUser">
            <span> {{headerImg.userName}}</span>
            <router-link to="">
               <i class="el-icon-edit" @click="_modifyUser(false)"></i>
            </router-link>
         </div>
         <div v-else class="modifyUser-bottom">
            <div class="input">
               <el-input
                  placeholder="请输入用户名"
                  v-model="userName"
                  clearable
                  @focus="_focusUser"
                  @blur="_blurUser('isUserName')"
               >
               </el-input>
               <p class="info">{{validatesInfo}}</p>
            </div>
            <div class="btn">
               <el-button type="primary"
                          :disabled="disabled"
                          @click="_submitData"
               >保存
               </el-button>
               <el-button type="info" @click="_modifyUser(true)">取消</el-button>
            </div>
         </div>
      </div>
      <div class="Account-number" v-if="isHeader">
         <el-row :gutter="16">
            <h1>账号安全</h1>
            <el-col :span="16">
               <div class="grid-content bg-purple" v-if="isCloseModify">
                  <p class="title">密码</p>
                  <p class="click">
                     <span @click="_CloseModify(false)">修改</span>
                  </p>
               </div>
               <div v-else class="Modify-password">
                  <h2>修改密码</h2>
                  <p>
                     <label for="oldPassword">原始密码</label>
                     <el-input
                        id="oldPassword"
                        placeholder="请输入内容"
                        v-model="oldPassword"
                        clearable>
                     </el-input>
                  </p>
                  <p>
                     <label for="newPassword">新密码</label>
                     <el-input
                        type="password"
                        id="newPassword"
                        placeholder="请输入新密码"
                        v-model="newPassword"
                        @focus="_focusNewPassword"
                        @blur="_blurNewPassword('isPassword')"
                        clearable>
                     </el-input>
                     <span v-if="isinfo">{{validatesInfo}}</span>
                  </p>
                  <p>
                     <label for="confirmPassword">确认密码</label>
                     <el-input
                        type="password"
                        id="confirmPassword"
                        placeholder="再次确认密码"
                        v-model="confirmPassword"
                        @blur="_blurconfirmPassword"
                        clearable>
                     </el-input>
                  </p>
                  <p class="btn">
                     <el-button type="primary"
                                :disabled="disabledPassword"
                                @click="_submitPassword"
                     >确定
                     </el-button>
                     <el-button type="info" @click="_CloseModify(true)">取消</el-button>
                  </p>
               </div>
            </el-col>
         </el-row>
         <el-row :gutter="16">
            <el-col :span="16">
               <div class="grid-content bg-purple">
                  <p class="title">邮箱</p>
                  <p>{{loginMessage.user.email}}</p>
               </div>
            </el-col>
         </el-row>
      </div>
      <div class="updata-header" v-else>
         <h1>上传头像</h1>
         <div>
            <el-row>
               <el-col :span="24"
                       v-loading="loading2"
                       element-loading-text="拼命上传中"
                       element-loading-spinner="el-icon-loading"
                       element-loading-background="rgba(0, 0, 0, 0.8)"
               >
                  <div class="grid-content bg-purple-dark">
                     <update-header v-if="userNames"
                                    :user-name="userNames"
                                    @cancel="_cancel"
                                    @updateloading = "_updateloading"
                     >
                     </update-header>
                  </div>
               </el-col>
            </el-row>
         </div>
      </div>
      <div v-show="false">
         <el-button :plain="true" @click="open2"></el-button>
      </div>

   </div>
</template>

<script>
   import {validates} from '../../assets/util/util'
   import updateHeader from '../update-model/update-model'
   import {mapGetters, mapMutations} from 'vuex'

   export default {
      name: 'userManagement',
      data() {
         return {
            isHeaderUser: true,
            isCloseModify: true,
            isHeader: true,
            userName: '',
            validatesInfo: '',
            disabled: true,
            disabledPassword: true,
            oldPassword: '',
            newPassword: '',
            confirmPassword: '',
            isinfo: false,
            loading2: false
         }
      },
      computed: {
         ...mapGetters(['loginMessage']),
         headerImg() {
            return this.loginMessage ? this.loginMessage.user : ''
         },
         userNames() {
            return this.loginMessage ? this.loginMessage.user.userName : ''
         }
      },
      methods: {
         _modifyUser(isClose) {
            this.isHeaderUser = isClose
            this.disabled = true
            this.userName = this.loginMessage.user.userName
         },
         _blurUser(type) {
            this._validates({
               type,
               value: this.userName
            })
            if (this.userName === '') {
               this.disabled = true
            }
         },
         _validates({value, type}) {
            let _validates = validates(value, type)
            if (_validates === true) {
               this.disabled = false
               this.isinfo = false
            } else {
               this.validatesInfo = _validates
            }
         },
         _focusUser() {
            this.validatesInfo = '只能在3至8位字符,汉字和字母数字组成'
            this.userName = ''
         },
         async _submitData() {
            if (this.userName === '') return
            this.disabled = true
            let odlUserName = {userName: this.loginMessage.user.userName}
            let newUserName = {userName: this.userName}
            let data = await this.$axios.post('/apis/login/updateUserName', {
               odlUserName,
               newUserName
            })
            if (data.data.success) {
               let user_id = window.sessionStorage.getItem('user_id')
               this.setUser(user_id)
               this.isHeaderUser = true
               this.open2()
            }
         },
         open2(message = '恭喜你，修改用户名成功，记得牢记', type = 'success') {
            this.$message({
               message: message,
               type: type
            });
         },
         _editHeader() {
            this.isHeader = false
         },
         _CloseModify(is) {
            this.isCloseModify = is
         },
         _focusNewPassword() {
            this.validatesInfo = '密码只能是6~16位字母和数字_.组成'
            this.isinfo = true
         },
         _blurNewPassword(type) {
            this._validates({
               type,
               value: this.newPassword
            })
         },
         _blurconfirmPassword() {
            if (!(this.newPassword || this.confirmPassword || this.oldPassword)) {
               this.open2('内容不能为空', 'warning')
               return
            }
            if (this.newPassword === this.confirmPassword) {
               this.disabledPassword = false
               return
            }
            this.open2('输入的密码不一致', 'warning')
         },
         async _submitPassword() {
            try {
               let data = await this.$axios.post('/apis/login/updatePassword', {
                  oldPassword: this.oldPassword,
                  newPassword: this.newPassword,
                  userName: {userName: this.loginMessage.user.userName}
               })
               if (data.data.result === 1 && !data.data.success) {
                  this.open2(data.data.message, 'warning')
               } else {
                  this.isCloseModify = true
               }
            } catch (e) {
               console.log(e)
            }
         },
         _cancel(isclose) {
            this.isHeader = isclose
         },
         _updateloading(isclose) {
            this.loading2 = isclose
         },
         ...mapMutations({
            setUser: 'getUser'
         })
      }
      ,
      components: {
         updateHeader
      }
   }
</script>

<style scoped lang="stylus">
   .el-row {
      margin-bottom: 20px;
      &:last-child {
         margin-bottom: 0;
      }
   }

   .user-management
      width 100%
      box-sizing border-box
      padding 20px 10px
      .header
         display flex
         .img
            position relative
            overflow hidden
            cursor pointer
            .edit-header
               position absolute
               top 100%
               width 100%
               height 100%
               background rgba(0, 0, 0, 0.5)
               display flex
               justify-content center
               align-items center
               color whitesmoke
               transition top 400ms
               cursor pointer
            &:hover .edit-header
               top 0
            img
               height 100px
               width 100px
      .modifyUser
         span
            color #666
            margin-right 10px
         font-size 18px
         margin-left 15px
      .modifyUser-bottom
         display flex
         flex-wrap wrap
         align-content space-between
         margin-left 20px
         width 300px
         .input
            width 100%
            .info
               text-align center
               color red
               font-size 12px
               width 100%
         .btn
            box-sizing border-box
            padding 0 20px
            width 100%
            height 40px
            justify-content space-between
            display flex

   .Account-number
      margin-top 50px
      width 100%
      .grid-content
         display flex
         align-items center
         box-sizing border-box
         padding 0 10px
         margin-top 20px
         min-height 50px
         width 100%
         .title
            width 100px
         .click
            width 100%
            text-align right
            color blue
            span
               cursor pointer
      .Modify-password
         width 400px
         p
            margin-top 10px

            span
               color red
               font-size 13px
            label
               color #766f6f
               margin-bottom 15px
         .btn
            display flex
            justify-content space-between
         h2
            color #666
            margin 10px 0
            font-size 20px
      h1
         color #666666
         border-bottom 1px solid #d5d5d5
         font-size 25px
         padding 20px 0px
         width 100%

   .updata-header
      h1
         font-size 25px
         padding 20px 0
         border-bottom 1px solid #666666
         margin-bottom 10px
      margin-top 50px
</style>
